import React, { memo, useRef } from 'react'
import type { FC, ReactNode } from 'react'
import { LtDrawerWrapper } from './style'
import { CSSTransition } from 'react-transition-group'

interface IProps {
  children?: ReactNode
  open: boolean
  direction?: 'left' | 'right' | 'top' | 'bottom'
  size?: string
  borderRadius?: string
  bgclor?: string
  onClose: () => void
}

const Drawer: FC<IProps> = (props) => {
  const {
    children,
    open,
    direction = 'bottom',
    size = '300px',
    borderRadius = '0',
    bgclor = '#fff',
    onClose
  } = props

  const maskRef = useRef<HTMLDivElement>(null)
  const drawerRef = useRef<HTMLDivElement>(null)

  // 关闭抽屉
  const closeHanlder = () => {
    onClose()
  }
  return (
    <LtDrawerWrapper
      $direction={direction}
      $size={size}
      $borderRadius={borderRadius}
      $bgclor={bgclor}
    >
      {/* 遮罩 */}
      <CSSTransition in={open} classNames="mask" timeout={300} unmountOnExit nodeRef={maskRef}>
        <div className="mask" onClick={() => closeHanlder()} ref={maskRef}></div>
      </CSSTransition>
      {/* 抽屉 */}
      <CSSTransition in={open} timeout={300} classNames="drawer" unmountOnExit nodeRef={drawerRef}>
        <div className="drawer" ref={drawerRef}>
          {children}
        </div>
      </CSSTransition>
    </LtDrawerWrapper>
  )
}

export default memo(Drawer)
